<template>
  <article class="page">
    <headerbar>会议资料</headerbar>
    <section class="frame-content-sub no-bg">
      <section class="inner-content pdv-9 pdh-4">

        <div class="color-tip mgb-1"><i class="required color-red">严禁上传或录入涉密内容</i></div>
        <div class="mgt-5 color-tip mgb-1"></div>
        <div class="text-block" @click="showEndTimePicker()">
          <div class="name color-default input-name">会议结束时间：</div>
          <div class="value"><input readonly type="text" placeholder="请选择会议结束时间" v-model="endTime"></div>
        </div>
        <!--现场图片-->
        <div class="mgt-5 color-tip mgb-1"></div>
        <div class="input-row-wrap">
          <div class="name"><i class="required color-red">*</i>添加现场图片：</div>
          <div></div>
        </div>
<!--        <cube-upload ref="upload"
                     action=""
                     v-model="imgFiles"
                     accept="mutiimage/*"
                     :simultaneous-uploads="1"
                     @files-added="imgUploadFile"
                     @file-removed="imgFileRemoved"
                     @input="imgOnInput"
        />-->
        <!--        ios的选择图片-->
        <div v-if="tools.isIos()">
        <cube-upload ref="upload"
                     action=""
                     v-model="imgFiles"
                     accept="image/*"
                     :simultaneous-uploads="1"
                     @files-added="imgUploadFile"
                     @file-removed="imgFileRemoved"
        />
        </div>
        <div v-else >
          <cube-upload ref="upload"
                       action=""
                       v-model="imgFiles"
                       accept="mutiimage/*"
                       :simultaneous-uploads="1"
                       @files-added="imgUploadFile"
                       @file-removed="imgFileRemoved"
          />
        </div>
        <div v-if="false" class="mgt-5 color-tip mgb-1"></div>
        <div v-if="false" class="input-row-wrap">
          <div class="name">会议记录：</div>
          <div></div>
        </div>
        <div v-if="false" class="input-row-wrap">
          <textarea placeholder="请填写会议记录" v-model="content" name="" cols="20" rows="3"></textarea>
        </div>

        <!--会议资料-->
<!--        <div class="mgt-5 color-tip mgb-1"></div>
        <div class="input-row-wrap">
          <div class="name">添加其他会议资料（图片、视频）：</div>
          <div></div>
        </div>
        <cube-upload ref="upload"
                     action=""
                     v-model="imgVideofiles"
                     accept="mutiimage/*"
                     :simultaneous-uploads="1"
                     @files-added="imgVideoUploadFile"
                     @file-removed="imgVideoFileRemoved"
                     @input="imgVideoOnInput"
        />-->

        <!--会议资料-->
        <div class="mgt-5 color-tip mgb-1"></div>
        <div class="input-row-wrap">
          <div class="name">添加其他会议资料（文件）：</div>
          <div></div>
        </div>
<!--        <cube-upload ref="upload"
                     action=""
                     v-model="files"
                     accept="*/*"
                     :simultaneous-uploads="1"
                     @files-added="uploadFile"
                     @file-removed="fileRemoved"
                     @input="onInput"
        />-->
        <cube-upload ref="upload"
                     action=""
                     v-model="files"
                     accept="*/*"
                     :simultaneous-uploads="1"
                     @files-added="uploadFile"
                     @file-removed="fileRemoved"
        />

        <div class="pdv-3"></div>

        <div class="default-block-btn" @click="submit()">提交</div>

        <div class="pdv-3"></div>

      </section>
    </section>
  </article>
</template>

<script>
  import {Textarea} from 'cube-ui'
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  import moment from 'moment'
  import fileIcon from '../../../../static/images/up_document.png'
  export default {
    components: {Textarea},
    name: 'problemSetting',
    data () {
      return {
        title: '',
        content: '',
        files: [],
        imgFiles: [],
        imgVideofiles: [],
        userInfo: {},
        attachmentList: [],
        imgAttachmentList: [],
        imgVideoAttachmentList: [],
        orgLifeId: '',
        startTime:'',
        endTime: '',
        uploadStatus: 1, //上传状态，0上传中、1全部上传完成
        imgVideoUploadStatus: 1, //上传状态，0上传中、1全部上传完成
        fileUploadStatus: 1, //上传状态，0上传中、1全部上传完成
        type:'',//会议分类
      }
    },
    created () {
      this.startTime = this.$route.query.startTime
      this.type = this.$route.query.type
      this.orgLifeId = this.$route.params.orgLifeId
      this.userInfo = this.$localStorage.get('userInfo')
    },
    methods: {
      submit () {
        // if (this.content === '') {
        //   return tools.tip('请填写会议纪要内容！')
        // }
        if (this.uploadStatus !== 1 || this.imgVideoUploadStatus !== 1 || this.fileUploadStatus !== 1) { //文件未上传完
          return tools.tip('文件上传中，请稍候···')
        }
        if (this.imgAttachmentList.length <= 0) {
          return tools.tip('请至少上传一张现场图片！')
        }
        let strFiles = this.attachmentList.concat(this.imgAttachmentList)
        console.log("----------strFiles1=", strFiles)
        let resutStrFile = strFiles.concat(this.imgVideoAttachmentList)
        console.log("----------resutStrFile=", resutStrFile)
        this.$createDialog({
          type: 'confirm',
          // icon: 'cubeic-alert',
          title: '温馨提示',
          content: '确认材料信息，是否进行提交？',
          confirmBtn: {
            text: '确定',
            active: true,
            disabled: false,
            href: 'javascript:;'
          },
          cancelBtn: {
            text: '取消',
            active: false,
            disabled: false,
            href: 'javascript:;'
          },
          onConfirm: () => {
            let data = {
              // loginId: this.userInfo.id,
              loginId: '3750',
              id: this.orgLifeId,
              summary: this.content,
              annexVoList: resutStrFile,
              endTime: this.endTime
            }
            console.log("----------data=", data)
            loginService.meet_optSaveOver(data).then((res) => {
              if (res.code !== 0) {
                return tools.tip(res.message)
              }
              // tools.back()
              this.tools.tip('提交成功')
              this.$router.replace({path: `/sanhuiyike/${this.type}`})
            })
          },
          onCancel: () => {
          }
        }).show()
      },
      // 删除文件
      fileRemoved (file) {
        this.attachmentList.some((v, i) => {
          if (v.fileName === file.file.name && v.totalBytes === file.file.size) {
            this.attachmentList.splice(i, 1)
            return false
          }
        })
      },
      uploadFile (file) {
        this.fileUploadStatus = 0;
        let uploadFile = file[0]
        let formData = new FormData()
        formData.append('file', uploadFile)
        loginService.o_upload(formData).then((res) => {
          console.log('uploadFile res=' + res)
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.fileUploadStatus = 1;
          this.attachmentList.push({
            'fileId': res.data.fileId,
            'fileUrl': res.data.desc,
            'fileName': uploadFile.name,
            'totalBytes': res.data.totalBytes,
            'type': '2'})
        })
      },
      onInput (file) {
        this.$refs.upload.files.map((v) => {
          if (!tools.isImage(v.name)) {
            v.url = fileIcon
          }
          return v
        })
      },
      // 删除文件
      imgFileRemoved (file) {
        this.imgAttachmentList.some((v, i) => {
          if (v.fileName === file.file.name && v.totalBytes === file.file.size) {
            this.imgAttachmentList.splice(i, 1)
            return false
          }
        })
      },
      imgUploadFile (file) {
        this.uploadStatus = 0;
        let length = file.length;
        let i = 0;
        for (let j in file) {
          let uploadFile = file[j]
          let formData = new FormData()
          formData.append('file', uploadFile)
          console.log('uploadFile.name={}', uploadFile.name)
          loginService.o_upload(formData).then((res) => {
            console.log('imguploadFile res=' + res)
            if (res.code !== 0) {
              return tools.tip(res.message)
            }
            i++;
            console.log('img i={}'+i)
            if (length === i) {
              this.uploadStatus = 1;
            }
            this.imgAttachmentList.push({
              'fileId': res.data.fileId,
              'fileUrl': res.data.desc,
              'fileName': uploadFile.name,
              'totalBytes': res.data.totalBytes,
              'type': '3'})
          })
        }
      },
      imgOnInput (file) {
        this.$refs.upload.imgFiles.map((v) => {
          if (!tools.isImage(v.name)) {
            v.url = fileIcon
          }
          return v
        })
      },
      // 会议时间格式：2019-12-06 21:48:00 精确到分
      showEndTimePicker () {
        this.$createTimePicker({
          showNow: true,
          minuteStep: 1,
          delay: 1,
          // min: new Date(),
          min:new Date(this.startTime),
          day: {
            len: 90,
            filter: ['今天', '明天'],
            format: 'M月d日'
          },
          onSelect: (selectedTime, selectedText, formatedTime) => {
            this.endTime = moment(selectedTime).format('YYYY-MM-DD HH:mm')
            this.$forceUpdate()
          }
        }).show().setTime(parseInt(moment().format('x')))
      },
      // 删除文件
      imgVideoFileRemoved (file) {
        this.imgVideoAttachmentList.some((v, i) => {
          if (v.fileName === file.file.name && v.totalBytes === file.file.size) {
            this.imgVideoAttachmentList.splice(i, 1)
            return false
          }
        })
      },
      imgVideoUploadFile (file) {
        this.imgVideoUploadStatus = 0;
        let length = file.length;
        console.log('length={}', length)
        let i = 0;
        for (let j in file) {
          let uploadFile = file[j]
          let formData = new FormData()
          formData.append('file', uploadFile)
          loginService.o_upload(formData).then((res) => {
            console.log('imgvideouploadFile res=' + res)
            if (res.code !== 0) {
              return tools.tip(res.message)
            }
            i++;
            console.log('imgVideo i='+i)
            if (length === i) {
              this.imgVideoUploadStatus = 1;
            }
            this.imgVideoAttachmentList.push({
              'fileId': res.data.fileId,
              'fileUrl': res.data.desc,
              'fileName': uploadFile.name,
              'totalBytes': res.data.totalBytes,
              'type': '3'})
          })
        }
      },
      imgVideoOnInput (file) {
        this.$refs.upload.imgFiles.map((v) => {
          if (!tools.isImage(v.name)) {
            v.url = fileIcon
          }
          return v
        })
      }
    },
    watch: {
      selected (newName, oldName) {
        this.chooseValue(newName)
      }
    }
  }
</script>

<style scoped>

</style>
